<!-- 模板 -->
<template>
  <div class="field">
      <div class="box">
          <!-- <el-button
          type="primary"
          icon="el-icon-plus"
          style="margin-bottom: 20px;"
          size="small"
          @click="xinzeng"
          >新增</el-button> -->
           <div class="btn">
                <el-form  :inline="true"  :model="params" size="small"  label-width="80px" >
                    <el-form-item label="分类名称:">
                        <el-select v-model="params.type" placeholder="请选择分类" clearable filterable @change="search">
                            <el-option
                            v-for="item in options2"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select> 
                    </el-form-item>
                     <el-form-item label="字段:">
                        <el-input  v-model="params.name" placeholder="输入字段" clearable @clear="search" /> 
                    </el-form-item>
                    <el-form-item label="状态:">
                        <el-select v-model="params.isDeleted" placeholder="请选择" clearable filterable @change="search">
                            <el-option
                            v-for="item in options4"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>  
                    </el-form-item>

                    <span style="margin-left:10px">
                        <el-button type="primary" icon="el-icon-search" size="small" @click="search">搜 索</el-button>
                        <el-button @click="xinzeng" type="warning" icon="el-icon-plus" size="small" >新 增</el-button >
                    </span>
                </el-form>
            </div>
        <el-card shadow="hover">
            <el-table  v-loading="loading" :data="tableData" border >
                <el-table-column type="index" label="序号" align="center" width="80px"/>
                <el-table-column prop="name" label="字段名称" align="center" />
                <el-table-column prop="typeName" label="分类" align="center" />
                <el-table-column prop="inputType" label="类型" align="center" >
                    <!-- <template slot-scope="scope">
                        {{scope.row.inputType ==1?'输入框':scope.row.inputType ==2?'单选':scope.row.inputType ==3?'多选':scope.row.inputType ==4?'日期':''}}
                    </template> -->
                </el-table-column>
                <el-table-column prop="isDeleted" label="是否启用" align="center" >
                    <template slot-scope="scope">
                        <el-tag  type='success' v-if="scope.row.isDeleted == 1">启用</el-tag>
                        <el-tag  type='danger' v-if="scope.row.isDeleted == 2">禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="required" label="是否必填" align="center" >
                    <template slot-scope="scope">
                        <el-tag  type='warning' v-if="scope.row.required == 0">非必填</el-tag>
                        <el-tag  type='danger' v-if="scope.row.required == 1">必填</el-tag>
                    </template>
                </el-table-column>
                <el-table-column  label="操作"  align="center">
                  <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" @click="bianji(scope.row)" size="small">编 辑</el-button>
                    <!-- <el-button type="danger" icon="el-icon-delete" @click="shanchu(scope.row)" size="small">删 除</el-button> -->
                  </template>
                </el-table-column>
            </el-table>
        </el-card>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="params.page"
          :limit.sync="params.limit"
          @pagination="getList"
        />
      </div>

<!-- 弹窗 -->
<el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="分类:">
            <el-select v-model="form.type" placeholder="请选择分类" clearable style="width:300px" @change="changeType">
                <el-option
                v-for="item in options2"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select> 
        </el-form-item>
        <el-form-item label="字段名称:" prop="name">
            <el-input v-model="form.name" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="排序:" prop="sort">
            <el-input v-model="form.sort" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="是否启用:" prop="isDeleted">
            <el-switch
            v-model="form.isDeleted"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2">
            </el-switch>
        </el-form-item>
        <el-form-item label="是否必填:" prop="required">
            <!-- <el-input v-model="form.required" ></el-input> -->
            <el-radio-group v-model="form.required">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="类型:">
            <el-select v-model="form.inputType" placeholder="请选择类型" clearable style="width:300px" @change="changeVal" :disabled="title == '编辑'">
                <el-option
                v-for="item in options1"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictLabel">
                </el-option>
            </el-select> 
        </el-form-item>
        <!-- <el-form-item label="绑定:" prop="mesName" >
            <el-select v-model="form.mesName" placeholder="请选择" clearable style="width:300px" :disabled="title == '编辑'">
                <el-option
                v-for="item in options3"
                :key="item"
                :label="item"
                :value="item">
                </el-option>
            </el-select> 
        </el-form-item> -->
        <el-form-item label="选项："  v-if="duoxuan">
          <el-radio-group
            v-model="form.optionList"
            ref="select"
            style="width:70%"
          >
            <div v-for="item in number" :key="item.index" style="margin-bottom:10px">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    placeholder="请输入选项内容"
                    v-model="item.optiones"
                  >
                  </el-input>
            </div>
          </el-radio-group>
          <el-form-item >
            <el-button
            type="primary"
            size="small"
            icon="el-icon-circle-plus-outline"
            @click="addSelect"
            >添加选项</el-button>
          </el-form-item>
          </el-form-item>

        <el-form-item label="配置数据:" prop="input_type" v-if="mesNameType">
            <el-select v-model="form.dictType" placeholder="请选择" clearable style="width:300px">
                <el-option
                v-for="item in options5"
                :key="item.dictType"
                :label="item.dictName"
                :value="item.dictType">
                </el-option>
            </el-select> 
        </el-form-item>
    </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="onSubmit">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { getFieldList,getFieldAdd,updateField,getClassList1,getMesName,getFiled} from "@/api/order/orderschool";
import { listType,  } from "@/api/system/dict/type";
export default {
  name: '',
  data () {
    return {
        tableData:[],
        params:{
            page: 1,
            limit: 10,
        },
        pageTotal: 0,
        dialogVisible:false,
        title:'',
        form:{
          inputType:'',
          optionList:[],
        },
        rules:{
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
          ],
          sort: [
            { required: true, message: '请输入排序', trigger: 'blur' },
          ],
          // mesName: [
          //   { required: true, message: '请选择绑定的字段', trigger: 'change' },
          // ],
        },
        options:[],
        options1: [],
        options2:[],
        options3:[],
        options4:[
        {
          value: 1,
          label: '启用'
        }, {
          value: 2,
          label: '禁用'
        },
        ],
        options5:[],
         number: [
        {
          index: 0,
          optiones: "",
        },
        {
          index: 1,
          optiones: "",
        },
      ],
        paramsFlag:0,
        typeId:undefined,
        queryParams: {
        pageNum: 1,
        pageSize: 10,
        dictName: undefined,
        dictType:undefined,
        dictStatus:false,
        mesNameType:false,
        duoxuan:false,
        showType:false,
      },
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    // 添加选项
    addSelect() {
      // console.log(this.number.length);
      let i = this.number.length;
      this.number.push({
        index: i,
        optiones: "",
      });
    },
    getType1(){
      this.queryParams.dictName = '动态配置'
      this.queryParams.dictType = ''
        listType(this.queryParams).then(res => {
          if(res.code == 200){
            // this.$nextTick (()=>{
              this.options5 = res.rows
            // })
          }
        })
    },
    changeVal(val){
      if(val == '字典表'){
        this.mesNameType = true
        this.dictStatus = true
        this.duoxuan  =false
        this.queryParams.dictName = '动态配置'
        listType(this.queryParams).then(res => {
          if(res.code == 200){
            // this.$nextTick (()=>{
              this.options5 = res.rows
            // })
          }
        })
      }else if(val == '多选' || val == '单选'){
        this.duoxuan = true
      } else {
        this.form.dictType = ''
        this.options5 = []
        this.dictStatus = false
        this.mesNameType =false
        this.duoxuan = false
      }
    },
    changeType(val){
      // console.log(val);
      this.typeId = val
      this.getMesList()
    },
      search(){
          console.log(this.params);
        this.$set(this.params, "page", 1);
        this.paramsFlag = 0;
        this.tableData = []
        this.getList();
      },
      bianji(row){
        // console.log(row);
        this.title = '编辑'
        getFiled(row.id).then(res =>{
          console.log(789);
          if(res.code == 200){
            this.form = res.data
            console.log(res.data);
            if(this.form.inputType == '字典表'){
              // console.log(345);
              this.mesNameType = true
              this.dictStatus = true
              this.duoxuan = false
              this.queryParams.dictType = this.form.dictType
              this.getType()
            }else if(this.form.inputType == '多选' || this.form.inputType == '单选'){
              // console.log(123);
              this.form = JSON.parse(JSON.stringify(res.data))
              this.number = this.form.optionList;
              this.mesNameType = false
              this.dictStatus = false
              this.duoxuan = true
              
            } else {
              this.dictStatus = false
            }
          }
        })
        // this.form = row
        // console.log(this.form);
       
        this.typeId =  row.type
        this.getMesList()
        this.dialogVisible = true
      },
      getType(){
        //  this.queryParams.dictName ='动态配置'
         listType(this.queryParams).then(res => {
          // console.log(res);
          if(res.code == 200){
            // this.$nextTick (()=>{
              this.form.dictType = res.rows[0].dictType
              this.getType1()
              // console.log(this.form.dictType);
            // })
          }
        })
      },
      xinzeng(){
          // this.getMesList()
          this.title = '新增'
          this.duoxuan  =false
           this.mesNameType = false
              this.dictStatus = false
           this.number = [{index: 0,optiones: '',},{index: 1,optiones: '',}];
          this.form = {
            isDeleted:1,
            required:0,
            inputType:this.options1[0].dictLabel,
            typeId:undefined,
            optionList:[],
          }
          
          this.dialogVisible = true
      },
      onSubmit(){
          this.$refs["form"].validate(valid => {
        if (this.form.id != undefined) {
                  updateField(this.form).then(res=>{
                      if(res.code == 200){
                          this.$message.success('编辑成功')
                          this.dialogVisible = false
                          this.getList()
                      }
                  })
                } else if(valid){
                   var data = [];
                this.number.forEach((item,index) => {
                  if(item.optiones !== ''){
                    data.push(item)
                  }
                })
                this.form.mesName = this.options3[0]
                this.form.optionList = data;
                // console.log(this.form.optionList);
                if(this.form.inputType == '多选' || this.form.inputType == '单选'){
                    if(this.form.optionList.length ==  0){
                        this.$message.warning('未填写选项')
                    }else {
                        // console.log(this.form);
                        getFieldAdd(this.form).then(res=>{
                            if(res.code == 200){
                                this.$message.success('添加成功')
                                this.dialogVisible = false
                                this.getList()
                            }
                        })
                    }
                }else {
                  // console.log(this.form);
                  getFieldAdd(this.form).then(res=>{
                      if(res.code == 200){
                          this.$message.success('添加成功')
                          this.dialogVisible = false
                          this.getList()
                      }
                  })
                }
                
                  
                }
      });
      },
      handleClose(){
        this.dialogVisible = false
        this.getList()
      },
      //   获取mesname
    getMesList(){
      const id = this.typeId
        getMesName(id).then(res => {
            // console.log(res);
            this.options3 = res.data
          });
    },
    //   获取分类
    getClsss(){
        getClassList1().then(res => {
            // console.log(res);
            this.options2 = res.data
            });
    },
      // 字段获取所有
      getList() {
          this.loading = true;
          getFieldList(this.params).then(res => {
            this.tableData = res.data.list
            // console.log(this.tableData);
            this.pageTotal = res.data.total
            for (let i = 0; i < this.tableData.length; i++) {
                   for (let j = 0; j < this.options2.length; j++) {
                          //  console.log(this.tableData[i].measureId,this.options[j].id);
                       if(this.tableData[i].type == this.options2[j].id){
                            this.tableData[i]['typeName'] = this.options2[j].name
                       }
                   }
                }
            this.loading = false;
          });
        },
  },
  created () {
    this.getDicts("input_type").then(response => {
        this.options1 = response.data;
        });
    this.getClsss()
    // this.getMesList()
    this.getList()
    
  },
  mounted () {}
}
</script>

<style rel="stylesheet/scss" lang="scss">
.box {
  padding: 20px 10px;
  .btn{
        margin-top: 20px;
    }
}
</style>
